<template>
    <div :style="{ height: treeData.children ? '800px' : '200px' }">
        <vue3-tree-org :data="treeData" :toolBar="false" :define-menus="[]" :scalable="false" :horizontal="horizontal" :collapsable="collapsable" :label-style="style" :node-draggable="false" :only-one-node="onlyOneNode" :default-expand-level="1" :clone-node-drag="cloneNodeDrag" v-if="treeData.id">
            <!-- 自定义节点内容 -->
            <template v-slot="{ node }">
                <flexbox class="tree-org-node__text node-label" style="cursor: pointer">
                    <a-tag :color="node.label.tagColor" v-if="node.pid" style="margin-right: 8px">
                        {{ node.label.type }}
                    </a-tag>
                    <div v-if="node.label.sprint">【{{ node.label.sprint }}】</div>
                    <a-tooltip :title="node.label.title">
                        <div v-fitText style="flex: 1">{{ node.label.title }}</div>
                    </a-tooltip>
                </flexbox>
                <div style="position: absolute; right: -80px; top: 14px" v-if="node.label.index === 9">
                    <a @click="jumpTo">查看更多</a>
                </div>
            </template>
        </vue3-tree-org>
        <flexbox style="height: 100%" justify="center" v-if="isEmpty">
            <a-empty />
        </flexbox>
    </div>
</template>
<script>
export default {
    name: 'slotTree',
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            treeData: {},
            horizontal: true,
            collapsable: false,
            onlyOneNode: true,
            cloneNodeDrag: false,
            expandAll: true,
            style: {
                background: '#fff',
                color: '#5e6d82'
            },
            isEmpty: false
        };
    },
    methods: {
        init() {
            const fieldArr = [
                { title: 'relatesTo', color: 'blue' },
                { title: 'isBlockedBy', color: 'red' },
                { title: 'isClonedBy', color: 'orange' },
                { title: 'isDuplicatedBy', color: 'cyan' },
                { title: 'isTestedBy', color: 'purple' },
                { title: 'splits', color: 'green' },
                { title: 'blocks', color: 'red' },
                { title: 'clones', color: 'orange' },
                { title: 'tests', color: 'purple' },
                { title: 'splitsTo', color: 'green' }
            ];
            let jiraArr = [];
            while (fieldArr.length && jiraArr.length < 10) {
                const target = fieldArr.shift();
                if (this.detail[target.title].length) {
                    const arr = this.detail[target.title].map((item) => {
                        return {
                            ...item,
                            color: target.color,
                            type: target.title
                        };
                    });
                    jiraArr.push(...arr);
                }
            }
            if (jiraArr.length > 10) {
                jiraArr = jiraArr.slice(0, 10);
            }
            let children = [];
            if (jiraArr.length) {
                children = jiraArr.map((item, index) => {
                    return {
                        id: item.id,
                        pid: this.detail.id,
                        label: {
                            title: item.summary,
                            sprint: item.sprint,
                            tagColor: item.color,
                            type: item.type,
                            index
                        },
                        style: { width: '350px', color: '#fff', background: item.summary === this.detail.summary ? '#FE9339' : '#108ffe' }
                    };
                });
                this.treeData = {
                    id: this.detail.id,
                    style: { width: '300px', color: '#fff', background: '#108ffe' },
                    label: {
                        title: this.detail.summary,
                        sprint: this.detail.sprint
                    },
                    children
                };
            } else {
                this.treeData = {
                    id: this.detail.id,
                    style: { width: '700px', color: '#fff', background: '#108ffe' },
                    label: {
                        title: this.detail.summary,
                        sprint: this.detail.sprint
                    }
                };
            }
        },
        jumpTo() {
            window.open(this.detail.jiraUrl, '_blank');
        }
    },
    created() {
        this.init();
    }
};
</script>
<style lang="less" scoped>
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
</style>
